export const imgerr = {
  // 这里有点类似vue组件的生命周期钩子,
  // 指定使用这个指令的元素,在不同生命周期应该触发的事件
  // 在我们现在的目标, 每当使用这个指令的元素插入页面时, 自动监听错误事件
  // 每当触发就修改 src
  inserted(el, option) {
    // 这里要用到两个形参
    // 1. 当前元素本身
    // 2. 指令配置对象
    // console.log('这里是元素插入页面时触发')
    // console.log(el)
    // console.log(option.value)
    // 用原生方法, 监听当前元素的错误
    // 如果发现报错
    el.addEventListener('error', function() {
      el.src = option.value
    })
    // 上面只能处理加载错误, 但是如果直接不存在 src 不会触发
    // 需要手动处理
    // if (!el.src) {
    //   el.src = option.value
    // }

    el.src = el.src || option.value
  },
  componentUpdated(el, option) {
    el.src = el.src || option.value
  }
  // 插入时做了两件事情, 1. 监听错误 2. 处理空值
  // 其中监听错误由于是监听器, 所以一直生效
  // 但是处理空值仅仅是普通的同步赋值代码而已
  // 后面就会失效
  // 我们需要在组件发生更新的时候,重新处理一遍空值才行
  // (无需再次添加监听器了)
}
